<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 冲塔怪
  Date: 2022/5/3
  Time: 18:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/jsp/common/left.jsp"%>
<%
    String basePath = request.getScheme()
            +"://"
            + request.getServerName()
            + ":"
            + request.getServerPort()
            + request.getContextPath()
            + "/";
%>
<html>
<head>
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            List();
            //给删除的a标签绑定单击事件，防止误触。
            $(document).on("click",".deleteItem",function () {
                var name = $(this).parent().parent().find("td:first").text();
                var uid = ${sessionScope.user.id};
                var gid = $(this).attr("goodId");
                if(confirm("你确定不要【"+name+"】了吗？")){
                    $.ajax({
                        url : "${pageContext.request.contextPath}/cart",
                        data : {
                            "action": "deleteItemDB",
                            "gId": gid,
                            "uId": uid
                        },
                        type : "post",
                        dataType : "json",
                        success : function (data) {
                            if(data){
                                alert("删除成功");
                            }else{
                                alert("删除失败");
                            }
                        }
                    })
                }
                List();
            });

            $(document).on("click","a.clearCart",function () {
                var uid = ${sessionScope.user.id};
                if(confirm("你确定要清空购物车吗？")){
                    $.ajax({
                        url : "${pageContext.request.contextPath}/cart",
                        data : {
                            "action": "deleteItemDBByUid",
                            "uId": uid
                        },
                        type : "post",
                        dataType : "json",
                        success : function (data) {
                            if(data){
                                alert("删除成功");
                            }else{
                                alert("删除失败");
                            }
                        }
                    })
                }
                List();
            });

            $(document).on("click","a.createOrder",function () {
                var uid = ${sessionScope.user.id};
                var totalPrice = $(this).attr("totalPrice");
                if($(this).attr("countNumber")>0){
                    location.href = "${pageContext.request.contextPath}/order?action=creatOrderDB&uId="+uid+"&totalPrice="+totalPrice;
                    <%--$.ajax({--%>
                    <%--    url : "${pageContext.request.contextPath}/order",--%>
                    <%--    data : {--%>
                    <%--        "action": "creatOrderDB",--%>
                    <%--        "uId": uid,--%>
                    <%--        "totalPrice": totalPrice--%>
                    <%--    },--%>
                    <%--    type : "post",--%>
                    <%--    dataType : "json",--%>
                    <%--    success : function (data) {--%>
                    <%--        if(data){--%>
                    <%--            alert("删除成功");--%>
                    <%--        }else{--%>
                    <%--            alert("删除失败");--%>
                    <%--        }--%>
                    <%--    }--%>
                    <%--})--%>
                }else{
                    alert("您的购物车还是空的");
                }
            });


            $(document).on("change",".updateCount",function () {
                var name = $(this).parent().parent().find("td:first").text();
                var uid = ${sessionScope.user.id};
                var gid = $(this).attr("goodId");
                var count = $(this).val();
                if(confirm("你确定要将【"+name+"】商品的数量修改为："+count+"吗？")){
                    $.ajax({
                        url : "${pageContext.request.contextPath}/cart",
                        data : {
                            "action": "updateItemDB",
                            "gId": gid,
                            "uId": uid,
                            "count": count
                        },
                        type : "post",
                        dataType : "json",
                        success : function (data) {
                            if(data){
                                alert("修改成功");
                                List();
                            }else{
                                alert("修改失败");
                            }
                        }
                    })
                }else{
                    this.value = this.defaultValue;
                }

            });



        });

        function List(){
            var uId = ${sessionScope.user.id};
            $.ajax({
                url : "${pageContext.request.contextPath}/cart",
                data : {
                    "action": "List",
                    "uId": uId
                },
                type : "get",
                dataType : "json",
                success : function (data) {

                    var html = "";
                    var count = 0;
                    var totalPrice = 0;
                    $.each(data,function (i,n) {
                        html += '<tr>';
                        html += '<td>'+n.name+'</td>';
                        html += '<td><input class="updateCount" type="text" goodId="'+n.gId+'" value="'+n.count+'" style="width: 50px"></td>';
                        html += '<td>'+n.price+'</td>';
                        html += '<td>'+(n.price * n.count)+'</td>';
                        html += '<td><button class="deleteItem" goodId="'+n.gId+'" >删除</button></td>';
                        html += '</tr>';
                        count+=n.count;
                        totalPrice+=(n.price * n.count);
                    })
                    $("#dataTable").html(html);
                    var html1 = "";
                    html1 += '<span>购物车共有<span><em>'+count+'</em></span>件商品</span>&nbsp;&nbsp;';
                    html1 += '<span>总金额 <span><em>'+totalPrice+'</em></span>元</span>&nbsp;&nbsp;';
                    html1 += '<span><a class="clearCart" href="#">清空购物车</a></span>&nbsp;&nbsp;';
                    html1 += '<span><a class="createOrder" href="#" countNumber="'+count+'" totalPrice="'+totalPrice+'">结账</a></span>';
                    $("#footer").html(html1);
                }
            })
        }
    </script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        .main{
            margin-left: 160px;
        }
        .header {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
            font-size: 30px;
        }
        .content {
            margin-left: 20%;
            background-color: #ffffff;
            padding: 10px;
        //height: 200px; /* Should be removed. Only for demonstration */
        }
        table{
            border: 1px solid;
            border-collapse: collapse;
            table-layout: fixed;  /*fiexed 列宽由表格宽度和列宽度设定。 默认。列宽度由单元格内容设定。*/
            word-break: break-all;   /*允许在单词内换行*/
            overflow:auto;
            text-align: center;
        }
        table tr td{
            border: 1px solid;
        }
        .footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="header"><h2>购物车</h2></div>
    <div class="content">
        <table >
            <thead>
                <tr>
                    <td width="150px">名称</td>
                    <td width="150px">数量</td>
                    <td width="150px">单价</td>
                    <td width="150px">总额</td>
                    <td width="150px">操作</td>
                </tr>
            </thead>

            <tbody id="dataTable">

            </tbody>


<%--            <c:if test="${empty sessionScope.cart.item}">--%>
<%--                <tr>--%>
<%--                    <td colspan="5">购物车为空</td>--%>
<%--                </tr>--%>
<%--            </c:if>--%>
<%--            <c:forEach items="${sessionScope.cart.item}" var="entry">--%>
<%--                <tr>--%>
<%--                    <td>${entry.value.name}</td>--%>
<%--                    <td><input class="updateCount" type="text" goodId="${entry.value.id}" value="${entry.value.count}" style="width: 50px"></td>--%>
<%--                    <td>${entry.value.price}</td>--%>
<%--                    <td>${entry.value.totalPrice}</td>--%>
<%--                    <td><a class="deleteItem" href="${pageContext.request.contextPath}/cart?action=deleteItem&id=${entry.value.id}">删除</a></td>--%>
<%--                </tr>--%>
<%--            </c:forEach>--%>
        </table>
    </div>
    <div class="footer" id="footer">
<%--        <span>购物车共有<span><em>${sessionScope.cart.totalCount}</em></span>件商品</span>--%>
<%--        <span>总金额 <span><em>${sessionScope.cart.totalPrice}</em></span>元</span>--%>
<%--        <span><a class="clearCart" href="${pageContext.request.contextPath}/cart?action=clearCart">清空购物车</a></span>--%>
<%--        <span><a href="${pageContext.request.contextPath}/order?action=creatOrder">结账</a></span>--%>
    </div>
</body>
</div>
</html>
